<!DOCTYPE html>
<html>

<head lang="zh-cn">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>馒头专用</title>
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script src="/assets/plugin/jquery-2.1.1.js"></script>
    <style>
        #res {
            width: 400px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        input {
            width: 100px;
        }
        .item{
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="item">
            <button id="newView">更新预览</button>
    </div>

    <div class="item">
        tagid:
        <input type="text" id="tagid" placeholder="tagid" /> 分页：
        <input type="text" id="page" placeholder="page" value="1" />
        <button id="getList">爬数据</button>
    </div>

    <div class="item">
            文章url:
            <input type="text" id="url" placeholder="文章的url" />
            <button id="getList2">爬数据</button>
        </div>

    <div class="item">
        要存的分类id：
        <input type="text" id="type" placeholder="模板分类id" />
        <button id="savetpl">存数据</button>
        <span id="tplinfo"></span>
    </div>

    <div id="res">
        <p>数据预览...</p>
    </div>
    <script>
        $(function () {
            let data = null;

            $('#newView').on('click', function () {
                let str = '';
                data.forEach(d => {
                    str += `${d.data}`;
                });
                $('#res').html(str);
            });

            // 抓文章
            $('#getList2').on('click', function () {
                $.ajax({
                    type: 'post',
                    url: '/api/spiderArt',
                    data: {
                        page: $('#url').val()
                    }
                }).done(res => {
                    let str = '';
                    res.data.forEach(d => {
                        str += `${d.data}`;
                    });
                    data = res.data;
                    $('#res').html(str);
                });
            });

            $('#getList').on('click', function () {
                $.ajax({
                    type: 'post',
                    url: '/api/spiderList',
                    data: {
                        tagid: $('#tagid').val(),
                        page: $('#page').val()
                    }
                }).done(res => {
                    let str = '';
                    res.data.forEach(d => {
                        str += `${d.data}`;
                    });
                    data = res.data;
                    $('#res').html(str);
                });
            });

            $('#savetpl').on('click', function () {
                $('#tplinfo').html('');
                if (!data) {
                    alert('数据还在抓取中...稍后再试试');
                    return;
                }
                let arr = [];
                let error = 0;
                data.forEach(d => {
                    arr.push(
                        new Promise((resolve, reject) => {
                            $.ajax({
                                type: 'post',
                                url: '/api/saveTpl',
                                data: {
                                    pic: '/assets/images/imgDom.jpg',
                                    name: d.name,
                                    data: d.data,
                                    type: $('#type').val()
                                }
                            }).done(res => {
                                if (res.success) {
                                    resolve();
                                } else {
                                    reject();
                                    console.error('这个数据存储失败', d);
                                    error++;
                                }
                            });
                        })
                    );

                    // 全部完成后
                    Promise.all(arr).then(res => {
                        $('#tplinfo').html('存储完成！失败：' + error);
                        setTimeout(function(){
                            $('#tplinfo').html('');
                        }, 3000);
                    });
                });
            });
        })
    </script>

</html>